<script>
const dialog = {
  name: 'CDialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    openFun: {
      type: Function,
      default: undefined
    },
    single: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: undefined
    },
    warnText: {
      type: String,
      default: ''
    },
    hideBtn: {
      type: Boolean,
      default: false
    },
    clear: {
      type: Boolean,
      default: true
    },
    routeSwitch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      $visible: null
    }
  },
  render(h) {
    const btn = h('c-button', { class: { 'hide-btn': this.hideBtn }, attrs: { type: 'primary' }, on: { click: this.clickHandle }}, this.title)
    const listeners = { ...this.$listeners }
    delete listeners.close
    listeners.close = this.closeHandle
    delete listeners.opened
    listeners.opened = this.openedHandle
    listeners['update:sync'] = this.updateSync
    const slot = this.$scopedSlots.default
    const elDialog = h('el-dialog', {
      class: 'c-dialog',
      props: {
        visible: this.visible,
        title: this.title,
        closeOnClickModal: false,
        ...this.$attrs
      },
      on: listeners
    }, slot && slot() || [h('span', '空')])
    return h('div', {
      class: 'dialog'
    }, [btn, elDialog])
  },
  activated() {
    if (this.routeSwitch && this.$visible !== null) {
      this.visible = this.$visible
      this.$visible = null
    }
  },
  deactivated() {
    if (this.routeSwitch) {
      this.$visible = this.visible
      this.visible = false
    }
  },
  methods: {
    clickHandle() {
      if (this.openFun instanceof Function) {
        const r = this.openFun()
        if (!(r instanceof Promise)) {
          this.visible = !!r
        } else {
          r.then(() => {
            this.visible = true
          })
        }
        return
      }
      if (this.data instanceof Array) {
        this.visible = this.singleJudge(this.data, this.warnText || this.title, this.single)
        return
      }
      this.visible = true
    },
    openedHandle() {
      if (this.$listeners.opened) {
        this.$listeners.opened()
      }
      for (const f of this.findForm(this.$children || [])) {
        const name = f.$options.name
        if (name === 'TableBox' && !f.noRequest) {
          f.initTableData()
        }
      }
    },
    updateSync(v) {
      this.visible = v
    },
    closeHandle() {
      this.visible = false
      if (this.$listeners.close) {
        this.$listeners.close()
      }
      if (!this.clear) return
      for (const f of this.findForm(this.$children || [])) {
        if (f.$options.name === 'CUpload') {
          f.fileList = []
          continue
        } else if (f.$options.name === 'ElUpload') {
          f.uploadFiles = []
          continue
        } else if (f.$options.name === 'TableBox') {
          f.clearSelection()
          // if (!f.noRequest) {
          // }
          continue
        }
        const model = f.model
        if (model) {
          for (const [k, v] of Object.entries(model)) {
            if (v !== '') {
              if (v instanceof Array) {
                model[k] = []
              } else if (typeof v === 'object') {
                model[k] = {}
              } else {
                model[k] = ''
              }
            }
          }
        }
        f.resetFields()
      }
      this.$emit('close')
    },
    findForm(children) {
      const fs = []
      for (const c of children) {
        const name = c.$options.name
        if (name === 'ElForm' || name === 'CUpload' || name === 'ElUpload' || name === 'TableBox') {
          fs.push(c)
        }
        if (c.$children && c.$children.length > 0) {
          fs.push(...this.findForm(c.$children))
        }
      }
      return fs
    }
  }
}
export default dialog
export const dialogInstall = {
  install(Vue) {
    Vue.component(dialog.name, dialog)
  }
}
</script>
<style lang="scss" scoped>
.dialog{
  display: inline-block;

}
</style>
<style lang="scss">
.el-button + .dialog,.dialog + .dialog,.dialog + .el-button{
  margin-left: 10px;
}
.c-dialog{
  .el-dialog__body{
    padding-top: 10px !important;
  }
}
.hide-btn{
  display: none;
}
</style>
